<template>
  <div class="preview">
    
    <div class="p-main">
        <div class="p-title" style="font-size:30px;font-weight:bold;padding-top:20px;">{{title}}</div>
      
        <div class="score">
            <!-- 
                <div class="score-head">
                <span>姓名 : {{name}}</span>
                <span>学号 : {{schoolid}}</span>
            </div>
             -->
            
            
            <div class="score-bottom" >
                <div class="bottom1">
                    <span class="span1">得分 : </span>
                    <span class="red-score">{{score}}</span>
                </div>
                <div class="bottom2" >
                    <span class="span1">{{right}}</span>
                    <span class="span2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;答对题数</span>
                </div>
                
            </div>
            <div class="footer" style="text-align:left;">
                <span>总分：{{fullscore}}</span>
                <span class="span3">&nbsp;&nbsp;&nbsp;&nbsp;共&nbsp;&nbsp;{{arr.length}}&nbsp;&nbsp;题</span>
            </div>
        </div>
      
      <span>答案解析</span>
      
      <el-card
        v-for="(item,index) in arr"
        shadow="never"
        :key="index"
        style="width:80%;margin: 0 auto;border:none;padding-left:50px;"
      >
        <!--        单选-->
        <template v-if="item.type == 'S'">
          <exam-finish-single-choice
            :item="item"
            :auto-id="showId"
            :num="index"
            @sendanswer="saveanswer"
          ></exam-finish-single-choice>
        </template>

        <!--        多选-->
        <template v-else-if="item.type == 'M'">
          <exam-finish-mul-choice :item="item" 
          :num="index" 
          :auto-id="showId"
          @sendanswer="saveanswer"
          ></exam-finish-mul-choice>
        </template>

        <!--        填空-->
        <template v-else-if="item.type == 'F'">
          <exam-finish-single-tiankong
            :item="item"
            :num="index"
            :auto-id="showId"
            @sendanswer="saveanswer"
          ></exam-finish-single-tiankong>
        </template>

        
      </el-card>
      
    </div>

    
    
  </div>
</template>


<script>
import ExamFinishSingleChoice from '@/components/ExamFinish/ExamFinishSingleChoice'

import ExamFinishMulChoice from '@/components/ExamFinish/ExamFinishMulChoice'

import ExamFinishSingleTiankong from '@/components/ExamFinish/ExamFinishSingleTiankong'


import {GetScore} from "../../api";
export default {
    name: "editbody",
    components: {
    ExamFinishSingleChoice,
    ExamFinishMulChoice,
    ExamFinishSingleTiankong,
    },
    data() {
    return {
        name:'xzx',
        schoolid:19373000,
        score:100,
        right:2,
        arr:[
        ],
        questionnaire_id:0,
        title:'',
        showId:true,
        qid:'',
        AllAnwser:[],
        totalscore:0
    }
},
    async mounted() {

        /* let params = JSON.parse(this.$UrlEncode.decode(this.$route.query.key))
        console.log(params)
        const id=params.questionnaireId
         */
       // console.log(this.$route.query.qid)
        let res = JSON.parse(this.$UrlEncode.decode(this.$route.query.questionnaireId))
        const id=res/1234;
        console.log('aaaa')
        console.log(id)
        const result=await GetScore(id)
        console.log('25')
        console.log(result)
        this.arr=result.questionList
        console.log(this.arr)
        this.title=result.questionnaire_title
        this.showId=result.is_order
        this.score=result.total_score
        this.right=result.right_count
       // this.totalscore=result.total_score
        this.fullscore=result.full_score

    },
    methods: {
        
    },
};
</script>

<style scoped>
.preview {
  height: 100%;
  width: 100%;
  background-color: #d1e9fa;
  overflow: auto;
}
.p-head {
  width: 100%;
  height: 7%;
  background-color: #fff;
  
}
.p-main {
  min-height: 750px;
  width: 60%;
  background-color: #fff;
  margin: 0 auto;
  
}
.score{
    height: 200px;
    width: 70%;
    margin: 0 auto;
    margin-top: 40px;
    
    text-align: left;
    
}
.score-head span{
    display: block;
    margin-left: 50px;
    margin-top: 22px;
    font-weight: bold;
}
.score-head{
    border: 1px solid rgb(241, 237, 237);
    height: 100px;

}

.span1{
    display: block;
    margin-left: 20px;
    margin-top: 40px;
    font-weight: bold;
}
.red-score{
    display: block;
    margin-left: 40%;
    margin-top:-35px;

    font-weight: bold;
    font-size: 50px;
    color: rgb(223, 50, 50);
    text-decoration: underline;
}
.bottom1,.bottom2,.bottom3{
    width: 49.65%;
    border: 1px solid rgb(241, 237, 237);
    height: 100px;
    float: left;
}
.bottom2{
    text-align: center;
    
}
.bottom2 .span1{
    font-size: 40px;
    display: block;
    margin-top:25px;
}
.bottom2 .span2{
    font-size: 10px;
    
}
.footer{

   border: 1px solid rgb(241, 237, 237);
   background-color: rgba(243, 234, 234, 0.815);
}
.footer span{
    margin-left: 115px;
}
.footer .span3{
    margin-left: 270px;
}
.bottom1,.bottom2,.bottom3{
   background-color: #fff;
}
</style>